<template>
  <div class="login-box">
    <form id="login" @submit.prevent="">
      <p class="login-box-top">
        <b>登录</b>
      </p>
      <div class="login-box-username">
        <input
          type="text"
          @change="handleUsername"
          @focus="handleUsernameFocus"
          v-model="user.username"
          placeholder="手机号/电子邮箱"
          name="username"
        />
        <div class="lbu-title" ref="username" v-show="username_isShow"></div>
      </div>

      <div class="login-box-password">
        <input
          type="password"
          v-model="user.password"
          @change="handlePassword"
          placeholder="登录密码，8-20位的数字或字母。"
          name="password"
        />
        <div class="lbu-title" ref="passwordRef" v-show="password_isShow"></div>
      </div>
      <div class="rem">
        <!-- <label>
          <input
            v-model="user.check"
            type="checkbox"
            name="rem"
            value="记住密码"
          />&nbsp;&nbsp;&nbsp;记住密码&nbsp;&nbsp;&nbsp;
        </label>
        <a href="#">忘记登录密码</a> -->
      </div>
      <div class="slide" ref="slideRef">
        <div class="slide_text">请按住滑块，滑至最右边</div>
        <button
          @mousedown="handleMousedown"
          @mousemove="handleMousemove"
          @mouseup="handleMouseup"
          @mouseleave="handleMouseleave"
        >
          &gt;&gt;
        </button>
        <div class="slide_bg" ref="slideBgRef"></div>
        <div class="slideTrue" ref="slideTrueRef" v-show="slide_isShow"></div>
      </div>
      <input type="submit" value="登录" @click="handleLogin" />
      <router-link to="/register" class="login-box-create"
        >创建一个新账户</router-link
      >
    </form>
  </div>
</template>

<script setup>
import { reactive, ref, toRef } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { $get, $post } from "../../request/index";
const $store = useStore();
const $router = useRouter();
// 数据仓库 login模块数据
let state = $store.state.login;
const user = reactive({
  icon: ["icon-weibomw", "icon-weixin", "icon-qq"],
  username: "",
  password: "",
  check: "",
});
// 绑定变量到ref 绑定的元素上
let username = ref();
// 手机号的正则
let reg =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
// 邮箱正则
let reg_ =
  /^[A-Za-z0-9\-_]+[A-Za-z0-9\.\-_]*[A-Za-z0-9\-_]+@[A-Za-z0-9]+[A-Za-z0-9\.\-_]*(\.[A-Za-z0-9\.\-_]+)*[A-Za-z0-9]+\.[A-Za-z0-9]+[A-Za-z0-9\.\-_]*[A-Za-z0-9]+$/;
// 用户名报错 显示文字
const username_isShow = ref(false);
function handleUsername() {
  if (user.username == "") {
    username.value.innerText = "手机号/邮箱不能为空，请输入手机号/邮箱。";
    username_isShow.value = true;
  } else if (reg.test(Number(user.username)) || reg_.test(user.username)) {
    username_isShow.value = false;
  } else {
    username.value.innerText = "手机号/邮箱格式有误，请重新输入";
    username_isShow.value = true;
  }
}
// 用户输入时，密码报错消失
function handleUsernameFocus() {
  password_isShow.value = false;
}
let passwordRef = ref();
let reg_pas = /^[0-9A-z]{8,20}$/;
// 密码的判断
let password_isShow = ref(false);
function handlePassword() {
  if (user.username == "") {
    username.value.innerText = "手机号/邮箱还未设置，请先设置手机号/邮箱。";
    user.password = "";
    username_isShow.value = true;
    password_isShow.value = false;
  } else if (user.password == "") {
    passwordRef.value.innerText = "密码不能为空，请输入密码";
    password_isShow.value = true;
  } else if (reg_pas.test(user.password) || reg_pas.test(user.password)) {
    password_isShow.value = false;
  } else {
    passwordRef.value.innerText = "密码格式有误，请重新输入";
    password_isShow.value = true;
  }
}
// 滑轮
let slideRef = ref("");
// 滑轮报错
let slide_isShow = ref(false);
// 获取滑轮报错 元素
let slideTrueRef = ref("");
// 获取背景
let slideBgRef = ref("");
// 鼠标抬起标志
let mouseup_flag = false;
// 在滑轮上鼠标按下
let mousedown_flag = false;
let startX;
// 移动到max距离
let max_flag = false;
function handleMousedown(e) {
  mouseup_flag = false;
  mousedown_flag = true;
  startX = e.clientX;
}
function handleMousemove(e) {
  if (mouseup_flag === false && max_flag === false && mousedown_flag === true) {
    let moveX = e.clientX - startX;
    //  设置条件确认移动的区域
    // 最大移动距离
    let maxMovex = slideRef.value.clientWidth - e.target.clientWidth;
    if (moveX <= 0) {
      moveX = 0;
      slideBgRef.value.innerText = "";
    } else if (e.target.offsetLeft >= maxMovex) {
      moveX = maxMovex;
      // 通过开关变量 判断是否达到条件    省去多次判断
      max_flag = true;
    }
    if (max_flag === true) {
      slide_isShow.value = true;
      slideBgRef.value.innerText = "验证成功";
      slideTrueRef.value.innerText = "滑轮验证成功";
      slideTrueRef.value.style.color = "blue";
    } else {
      slideTrueRef.value.innerText = "";
    }
    e.target.style.left = moveX + "px";
    e.target.style.transition = "none";
    slideBgRef.value.style.width = moveX + "px";
    slideBgRef.value.style.transition = "none";
  }
}
// 鼠标抬起事件    开始移动 清除过渡和移动事件
function handleMouseup(e) {
  mouseup_flag = true;
  mousedown_flag = false;
  if (max_flag === true) {
    return;
  }
  e.target.style.left = 0;
  slideBgRef.value.style.width = 0 + "px";
  e.target.style.transition = "left 0.6s";
  slideBgRef.value.style.transition = "width 0.6s";
}

// 鼠标离开  回到原位   清除移动事件
function handleMouseleave(e) {
  if (max_flag === true) {
    return;
  }
  mouseup_flag = true;
  e.target.style.left = 0;
  slideBgRef.value.style.width = 0;
  e.target.style.transition = "left 0.6s";
  slideBgRef.value.style.transition = "width 0.6s";
}

// 登录的判断
function handleLogin(e) {
  if (max_flag === false) {
    slideTrueRef.value.innerText = "滑轮验证失败。请重新验证";
    slideTrueRef.value.style.color = "red";
    slide_isShow.value = true;
  } else {
    slideTrueRef.value.innerText = "";
  }
  // 发送post请求
  e.preventDefault();
  handleUsername();
  handlePassword();
  if (
    username_isShow.value != true &&
    password_isShow.value != true &&
    max_flag === true
  ) {
    $post("/user/login", { username: user.username, password: user.password })
      .then((data) => {
        if (data.code == 200) {
          // 登录存入token
          window.localStorage.setItem("token", data.token);
          window.localStorage.setItem("username", data.username);
          alert(data.msg);
          $store.commit("isLogin");
          $router.push("/");
        } else if (data.code == 100) {
          password_isShow.value = true;
          passwordRef.value.innerText = data.msg;
        } else if (data.code == -200) {
          username.value.innerText = data.msg;
          username_isShow.value = true;
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("报错");
      });
  }
}
</script>


<style lang="less" scoped>
@import url("../../public/font/font_icon.css");
a {
  color: #000;
}
.login-box {
  background: url("../../public/images/user/login_bg.jpg") no-repeat center
    center/cover;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  #login {
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: #fff;
    padding: 0 26px;
    box-sizing: border-box;
    .login-box-top {
      width: 100%;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      line-height: 30px;
      b {
        font-size: 24px;
      }
      a {
        font-size: 14px;
        color: #333;
      }
    }
    .login-box-username,
    .login-box-password {
      position: relative;
      input::placeholder {
        font-size: 14px;
      }
      input {
        width: 100%;
        border: none;
        border-bottom: 1px solid #333;
        padding-bottom: 2px;
        height: 30px;
        margin-top: 40px;
        outline: none;
        font-size: 16px;
      }
      .lbu-title {
        position: absolute;
        font-size: 14px;
        color: red;
        top: 74px;
      }
    }
    & > .rem {
      display: flex;
      justify-content: space-between;
      line-height: 80px;
      font-size: 14px;
      label {
        text-align: left;
        cursor: pointer;
        input {
          cursor: pointer;
        }
      }
    }
    input:-internal-autofill-selected {
      transition: background-color 5000s ease-in-out 0s !important;
    }
    input[type="submit"],
    .login-box-create {
      height: 42px;
      font-size: 16px;
      margin-top: 0;
    }
    input[type="submit"] {
      background-color: #000000;
      cursor: pointer;
      color: #fff;
      margin: 0 0 38px;
    }
    .login-box-create {
      text-align: center;
      border: 1px solid #000;
      cursor: pointer;
      line-height: 50px;
      box-sizing: border-box;
      margin-bottom: 52px;
    }
    .login-box-text {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px 0;
      span {
        flex: 1;
        height: 1px;
        background-color: #ccc;
      }
    }
    // 滑轮验证
    .slide {
      width: 100%;
      height: 42px;
      position: relative;
      border: 1px solid #333;
      margin: 50px auto 40px;
      font-size: 14px;
      color: #999;
      line-height: 42px;
      box-sizing: border-box;
      .slide_text {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #ccc;
        text-align: center;
        font-size: 14px;
      }
      button {
        width: 68px;
        height: 100%;
        position: absolute;
        background-color: #fff;
        border: none;
        color: #ccc;
        left: 0px;
        cursor: pointer;
      }

      .slide_bg {
        position: absolute;
        height: 100%;
        background-color: #007acc;
        text-align: center;
        color: #fff;
      }
      .slideTrue {
        position: absolute;
        top: calc(100% - 4px);
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>

